import { CSSProperties, FC, PropsWithChildren } from 'react'

import { ModuleTitle, Tb } from '../../../BigScreenBase/ModuleTitle'

export type DisplayCardProps = PropsWithChildren<{
  title: string
  height?: number | string
  moduleTitleTabList?: Tb[]
  onModuleTitleTabChange?: (e: Tb) => void
  activeTabKey?: number | string
  bodyStyle?: CSSProperties
  onModuleTitleTabMouseEnter?: () => void
  onModuleTitleTabMouseLeave?: () => void
}>

const DisplayCard: FC<DisplayCardProps> = ({
  title,
  height,
  bodyStyle,
  moduleTitleTabList,
  activeTabKey,
  onModuleTitleTabChange,
  onModuleTitleTabMouseEnter,
  onModuleTitleTabMouseLeave,
  children
}) => {
  return (
    <div className="bigscreen-module ms-module" style={{ height }}>
      <ModuleTitle
        title={title}
        tab={moduleTitleTabList}
        tabChange={onModuleTitleTabChange}
        activeKey={activeTabKey}
        onTitleTabMouseEnter={onModuleTitleTabMouseEnter}
        onTitleTabMouseLeave={onModuleTitleTabMouseLeave}
      />
      <div style={{ padding: 16, boxSizing: 'border-box', ...bodyStyle }}>
        {children}
      </div>
    </div>
  )
}

export default DisplayCard
